<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="Developed By M Abdur Rokib Promy"/>
    <meta name="author" content="cosmic"/>
    <meta name="keywords" content="Bootstrap 3, Template, Theme, Responsive, Corporate, Business"/>
    <link rel="shortcut icon" href="/img/favicon.png"/>

    <title>
      Acme | Home
    </title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/theme.css" rel="stylesheet"/>
    <link href="/css/bootstrap-reset.css" rel="stylesheet"/>
    <!--external css-->
    <link href="/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/flexslider.css"/>
    <link href="/assets/bxslider/jquery.bxslider.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/animate.css"/>
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>


    <!-- Custom styles for this template -->
    <link href="/css/style.css" rel="stylesheet"/>
    <link href="/css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
<script src="/js/html5shiv.js">
</script>
<script src="/js/respond.min.js">
</script>
<![endif]-->
  </head>
  <body>
    <!--header start-->
    <header th:include="/common/header" class="head-section">
  	</header>
    <!--header end-->

    <!--breadcrumbs start-->
    <div class="breadcrumbs">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-sm-4">
            <h1>
              	文章列表
            </h1>
          </div>
          <div class="col-lg-8 col-sm-8">
            <ol class="breadcrumb pull-right">
              <li>
                <a href="javaScript:void(0);">
                  		主页
                </a>
              </li>
              <li class="active">
               		我的文章列表
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!--breadcrumbs end-->

    <!--container start-->
    <div class="container" id="mainBody">
      <div class="row">
        <div class="col-md-6" >
          <div th:if="${articleStat.even}==true" class="blog-left wow fadeInLeft" th:each="article:${articleList}">
            <div class="blog-img">
              <img th:src="${article.coverFileSrc}" alt=""/>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="blog-two-info">
                  <p>
                    <i class="fa fa-user">
                    </i>
                    by
                    <a href="javaScript:void(0);" th:text="${article.author.name}">
                      John
                    </a>

                    |
                    <i class="fa fa-calendar">
                    </i>
                    <span th:text="${article.mounth}+' '+${article.day}+' '+${#strings.substring(article.createTimeStr,0,4)}"></span>
                    |
                    <i class="fa fa-comment">
                    </i>

                    <a href="javaScript:void(0);">
                      3 Comments
                    </a>
                    |
                    <i class="fa fa-share">
                    </i>

                    <a href="javaScript:void(0);">
                      39 Shares
                    </a>
                    <br/>
                    <i class="fa fa-tags">
                    </i>
                    	标签:
                    <a href="javaScript:void(0);" th:each="targetList:${article.targetList}">
                      <span class="label label-info" th:text="${targetList}">
                      </span>
                    </a>
                  </p>
                </div>
              </div>
            </div>
            <div class="blog-content">
              <h3 th:text="${article.title}">
               
              </h3>
              <p th:text="${article.description}">
               
              </p>
            </div>
            <button class="btn btn-primary" th:attr="articleId=${article.id}">
              我还想看更多..
            </button>

          </div>
   		</div>
          <div class="col-md-6">
			 <div th:if="${articleStat.even}==false" class="blog-right wow fadeInRight" th:each="article:${articleList}">
	            <div class="blog-img">
	              <img th:src="${article.coverFileSrc}" alt=""/>
	            </div>
	            <div class="row">
	              <div class="col-md-12">
	                <div class="blog-two-info">
	                  <p>
	                    <i class="fa fa-user">
	                    </i>
	                    by
	                    <a href="javaScript:void(0);" th:text="${article.author.name}">
	                      John
	                    </a>
	
	                    |
	                    <i class="fa fa-calendar">
	                    </i>
	                    <span th:text="${article.mounth}+' '+${article.day}+' '+${#strings.substring(article.createTimeStr,0,4)}"></span>
	                    |
	                    <i class="fa fa-comment">
	                    </i>
	
	                    <a href="javaScript:void(0);">
	                      3 Comments
	                    </a>
	                    |
	                    <i class="fa fa-share">
	                    </i>
	
	                    <a href="javaScript:void(0);">
	                      39 Shares
	                    </a>
	                    <br/>
	                    <i class="fa fa-tags">
	                    </i>
	                    	标签:
	                    <a href="javaScript:void(0);" th:each="targetList:${article.targetList}">
	                      <span class="label label-info" th:text="${targetList}">
	                      </span>
	                    </a>
	                  </p>
	                </div>
	              </div>
	            </div>
	            <div class="blog-content">
	              <h3 th:text="${article.title}">
	               
	              </h3>
	              <p th:text="${article.description}">
	               
	              </p>
	            </div>
	            <button class="btn btn-primary" th:attr="articleId=${article.id}">
	              我还想看更多..
	            </button>
	          </div>
          </div>
          <!--blog end-->
      </div>

    </div>
    <!--container end-->

    <!--footer start-->
    <footer class="footer">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-sm-3 address wow fadeInUp" data-wow-duration="2s" data-wow-delay=".1s">
            <h1>
              contact info
            </h1>
            <address>
              <p>
                <i class="fa fa-home pr-10">
                </i>
                Address: No.XXXXXX street
              </p>
              <p>
                <i class="fa fa-globe pr-10">
                </i>
                Mars city, Country
              </p>
              <p>
                <i class="fa fa-mobile pr-10">
                </i>
                Mobile : (123) 456-7890
              </p>
              <p>
                <i class="fa fa-phone pr-10">
                </i>
                Phone : (123) 456-7890
              </p>
              <p>
                <i class="fa fa-envelope pr-10">
                </i>
                Email :
                <a href="javascript:;">
                  support@example.com
                </a>
              </p>
            </address>
          </div>
          <div class="col-lg-3 col-sm-3 wow fadeInUp" data-wow-duration="2s" data-wow-delay=".3s">
            <h1>
              latest tweet
            </h1>
            <div id="owl-slide">
              <div class="tweet-box">
                <i class="fa fa-twitter">
                </i>
                <em>
                  Please follow
                  <a href="javascript:;">
                    @example
                  </a>
                  for all future updates of us!
                  <a href="javascript:;">
                    twitter.com/acme
                  </a>
                </em>
              </div>
              <div class="tweet-box">
                <i class="fa fa-twitter">
                </i>
                <em>
                  Please follow
                  <a href="javascript:;">
                    @example
                  </a>
                  for all future updates of us!
                  <a href="javascript:;">
                    twitter.com/acme
                  </a>
                </em>
              </div>
              <div class="tweet-box">
                <i class="fa fa-twitter">
                </i>
                <em>
                  Please follow
                  <a href="javascript:;">
                    @example
                  </a>
                  for all future updates of us!
                  <a href="javascript:;">
                    twitter.com/acme
                  </a>
                </em>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-3">
            <div class="page-footer wow fadeInUp" data-wow-duration="2s" data-wow-delay=".5s">
              <h1>
                Our Company
              </h1>
              <ul class="page-footer-list">

                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="about.html">
                    About Us
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="faq.html">
                    Support
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="service.html">
                    Service
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="privacy-policy.html">
                    Privacy Policy
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="career.html">
                    We are Hiring
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="terms.html">
                    Term   condition
                  </a>
                </li>

              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-sm-3">

            <div class="text-footer wow fadeInUp" data-wow-duration="2s" data-wow-delay=".7s">
              <h1>
                Text Widget
              </h1>
              <p>
                This is a text widget.Lorem ipsum dolor sit amet.
                This is a text widget.Lorem ipsum dolor sit amet
              </p>
            </div>
          </div>

        </div>

      </div>
    </footer>
    <!-- footer end -->
    <!--small footer start -->
    <footer class="footer-small">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-sm-6 pull-right">
                    <ul class="social-link-footer list-unstyled">
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".1s"><a href="javaScript:void(0);"><i class="fa fa-facebook"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".2s"><a href="javaScript:void(0);"><i class="fa fa-google-plus"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".3s"><a href="javaScript:void(0);"><i class="fa fa-dribbble"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".4s"><a href="javaScript:void(0);"><i class="fa fa-linkedin"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".5s"><a href="javaScript:void(0);"><i class="fa fa-twitter"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".6s"><a href="javaScript:void(0);"><i class="fa fa-skype"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".7s"><a href="javaScript:void(0);"><i class="fa fa-github"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".8s"><a href="javaScript:void(0);"><i class="fa fa-youtube"></i></a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                  <div class="copyright"> <p>&copy; Copyright - Acme Theme by cosmic.More Templates</p>
                  </div>
                </div>
            </div>
        </div>
    </footer>
    <!--small footer end-->

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.js">
    </script>
    <script src="/js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src="/js/hover-dropdown.js">
    </script>
    <script src="/js/jquery.flexslider.js">
    </script>
    <script type="text/javascript" src="/assets/bxslider/jquery.bxslider.js">
    </script>

    <script src="/js/jquery.easing.min.js">
    </script>
    <script src="/js/link-hover.js">
    </script>


    <!--common script for all pages-->
    <script src="/js/common-scripts.js">
    </script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#mainBody").find("[class='btn-primary']")
		$(".btn-primary").click(function(){
			window.location.href="/getArticle/"+$(this).attr("articleId");
		})
	
	})
	
	
	</script>

    <script src="/js/wow.min.js">
    </script>
    <script>
      wow = new WOW(
        {
          boxClass:     'wow',      // default
          animateClass: 'animated', // default
          offset:       0          // default
        }
      )
        wow.init();
    </script>

  </body>
</html>
